﻿@using GlobalResources
@using Newtonsoft.Json
@using Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Web.Helpers
@using Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Infrastructure.Models
@model Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Web.Models.ScheduleTwinUpdateModel

@{
    ViewBag.Title = @Strings.UpdateTwin;
    Layout = "~/Views/Shared/_LayoutNoNavigation.cshtml";
}

<header class="header_main">

    <button class="header_main__button_back" type="button" data-bind="click: backButtonClicked"></button>
    <h2 class="header_main__subhead header_main__subhead--large">
        @Strings.ScheduleEditPropertiesOrTags <span class="item__description">
            @{
                if (Model.FilterName == "*")
                {
                    <text>
                        @Strings.AllDevices
                    </text>
                }
                else
                {
                    <text>
                        @Model.FilterName
                    </text>
                }
            }
            <small data-bind="text:getTotalFilterdCount"></small>
        </span>
    </h2>
</header>
<div class="content_outer">

    <div class="content_inner">
        <div id="content">
            <div id="scheduleJobParameter">
                @using (Html.BeginForm("ScheduleTwinUpdate", "Job", FormMethod.Post, new { data_bind = "submit: beforePost" }))
                {
                    @Html.AntiForgeryToken()

                    <fieldset class="edit_form">
                        @{
                            <div>
                                @Html.LabelFor(m => m.JobName, Strings.ScheduleJobName, new { @class = "edit_form__label" })
                                @Html.TextBoxFor(m => m.JobName, new { placeholder = Strings.ScheduleJobNamePlaceHolder, data_bind = "value: jobName", @class = "edit_form__text" })
                            </div>
                            @Html.HiddenFor(m => m.FilterId)
                            <div style="clear:both"></div>
                            <div class="edit_form__inputGroup">
                                <label for="propertiesTable" class="edit_form__label">@Strings.ScheduleChangeDesiredProperties</label>
                                <table class="values_editor" id="propertiesTable">
                                    <thead>
                                        <tr class="values_editor__groupheader">
                                            <th class="edit_form__labelHeader">@Strings.ScheduleDesiredPropertyName</th>
                                            <th class="edit_form__labelHeader">@Strings.ScheduleEditValue</th>
                                            <th class="edit_form__labelHeader">@Strings.DataTypeLabel</th>
                                            <th class="edit_form__labelHeader" title="@Strings.EditDesiredPropertyDelete">
                                                <div class="tooltip_header">
                                                    @Strings.Delete
                                                    <img src="~/Content/img/icon_info_gray.svg" class="details_grid_info tooltip_icon" title="@Strings.EditDesiredPropertyDelete" />
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach:{data: properties, afterAdd:makeproplist}">
                                        <tr class="values_editor__group">
                                            <td>
                                                <input type="text" class="edit_form__texthalf edit_form__propertiesComboBox"
                                                       placeholder="@Strings.PropertyTextPlaceHolder"
                                                       data-msg-regex=" "
                                                       data-rule-regex="^desired\.\S+$"
                                                       data-rule-maxtwindepth="5"
                                                       data-bind='value: PropertyName, css:{edit_form__deleted : isDeleted()}, attr: { name: $root.getDesiredInputPrefix($index())+".PropertyName", id: "DesiredProperties" + $index() + ".PropertyName" }' />
                                            </td>
                                            <td>
                                                <input type="text" class="edit_form__texthalfvalue"
                                                       data-rule-maxbytelength="512"
                                                       data-bind='textInput: PropertyValue, enable:PropertyName() && !isDeleted(), css:{edit_form__deleted : isDeleted()},  event: { keyup: $root.createEmptyPropertyIfNeeded }, attr: { name: $root.getDesiredInputPrefix($index())+".PropertyValue", id: "DesiredProperties" + $index() + ".PropertyValue" }' />
                                            </td>
                                            <td>
                                                <select class="edit_form_select" data-bind="value: DataType,  enable:!isDeleted() && PropertyName(),css:{edit_form__deleted : isDeleted()}, options: $root.twinDataTypeOptions, optionsText: 'text', optionsValue: 'value', attr: { name: $root.getDesiredInputPrefix($index())+'.DataType', id: 'DesiredProperties' + $index() + '.DataType' }"></select>
                                            </td>
                                            <td>
                                                <input type="checkbox"
                                                       value="true"
                                                       data-bind='checked: isDeleted, enable:PropertyName() ,attr: { name: $root.getDesiredInputPrefix($index())+".isDeleted", id: "DesiredProperties" + $index() + ".isDeleted" }' />
                                                <input type="hidden" value="false" name="checkbox" data-bind='attr:{ name: $root.getDesiredInputPrefix($index())+".isDeleted" }' />
                                            </td>
                                            <td><a data-bind="ifnot:$root.onepropleft , click:$root.removeProperty"><small class="text_small">@Strings.Clear</small></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="edit_form__inputGroup">
                                <label for="tagsTable" class="edit_form__label">@Strings.ScheduleChangeTags</label>
                                <table class="values_editor" id="tagsTable">
                                    <thead>
                                        <tr class="values_editor__groupheader">
                                            <th class="edit_form__labelHeader">@Strings.TagName</th>
                                            <th class="edit_form__labelHeader">@Strings.ScheduleEditValue</th>
                                            <th class="edit_form__labelHeader">@Strings.DataTypeLabel</th>
                                            <th class="edit_form__labelHeader" title="@Strings.EditTagDelete">
                                                <div class="tooltip_header">
                                                    @Strings.Delete
                                                    <img src="~/Content/img/icon_info_gray.svg" class="details_grid_info tooltip_icon" title="@Strings.EditTagDelete" />
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach: {data: tags, afterAdd: maketaglist}">
                                        <tr class="values_editor__group">

                                            <td>
                                                <input type="text" class="edit_form__texthalf edit_form__tagsComboBox"
                                                       placeholder="@Strings.TagTextPlaceHolder"
                                                       data-msg-regex=" "
                                                       data-rule-regex="^tags\.\S+$"
                                                       data-rule-maxtwindepth="5"
                                                       data-bind='value: TagName, css:{edit_form__deleted : isDeleted()}, attr: { name: $root.getTagInputPrefix($index())+".TagName", id: "Tags" + $index() + ".TagName" }' />
                                            </td>
                                            <td>
                                                <input type="text" class="edit_form__texthalfvalue"
                                                       data-rule-maxbytelength="512"
                                                       data-bind='textInput: TagValue, enable:TagName() && !isDeleted(), css:{edit_form__deleted : isDeleted()}, event: { keyup: $root.createEmptyTagIfNeeded }, attr: { name: $root.getTagInputPrefix($index())+".TagValue", id: "Tags" + $index() + ".TagValue" }' />
                                            </td>
                                            <td>
                                                <select class="edit_form_select" data-bind="value: DataType,  enable:!isDeleted() && TagName(), css:{edit_form__deleted : isDeleted()}, options: $root.twinDataTypeOptions, optionsText: 'text', optionsValue: 'value', attr: { name: $root.getTagInputPrefix($index())+'.DataType', id: 'Tags' + $index() + '.DataType' }"></select>
                                            </td>
                                            <td>
                                                <input type="checkbox"
                                                       value="true"
                                                       data-bind='checked: isDeleted, enable:TagName(), attr: { name: $root.getTagInputPrefix($index())+".isDeleted", id: "Tags" + $index() + ".isDeleted" }' />
                                                <input type="hidden" value="false" name="checkbox" data-bind='attr:{ name: $root.getTagInputPrefix($index())+".isDeleted" }' />
                                            </td>
                                            <td><a class="edit_form__link" data-bind="ifnot:$root.onetagleft , click:$root.removeTag"><small class="text_small">@Strings.Clear</small></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="edit_form__inputGroup">
                                <label for="scheduleJobTime" class="edit_form__label">@Strings.ScheduleSetJobTime</label>

                                <div id="scheduleJobTime" class="values_editor">
                                    <div class="values_editor__group">
                                        <label class="edit_form__labelHeader">@Strings.StartTime</label>
                                        <div class="input-group" data-bind="dateTimePicker: startDate ,dateTimePickerOptions:{ allowInputToggle : true, widgetPositioning : {horizontal: 'left' ,vertical: 'top'}, format: 'LLL', locale: getCulture() }">
                                            <input type='text' id="StartDate" class="non_float edit_form__text less_margin"
                                                   data-msg-required=" "
                                                   data-rule-required="true" />
                                            <span class="input-group-addon">
                                                <img class="edit_form__datePickerImg" src="/Content/img/expanded.svg">
                                            </span>
                                        </div>
                                        <input type="hidden" id="StartDateHidden" name="StartDateUtc" />
                                    </div>
                                    <div class="values_editor__group">
                                        <label class="edit_form__labelHeader tooltip_header">@Strings.MaxExecutionTime  <img src="~/Content/img/icon_info_gray.svg" class="details_grid_info tooltip_icon" title="@Strings.MaximumExecutionTime" /></label>

                                        <input type="text" class="non_float less_margin edit_form__textsmall" name="MaxExecutionTimeInMinutes" data-bind="value: maxExecutionTime"
                                               data-msg-required=" "
                                               data-rule-regex="^\d+(\.\d+)?$"
                                               data-rule-required="true" />
                                        <span>Mins</span>
                                    </div>
                                </div>
                            </div>
                        }
                    </fieldset>

                    <fieldset class="fieldset_button">
                        <input type="button" class="button_base button_secondary button_cancel" data-bind="click: backButtonClicked" value="@Strings.Cancel" />
                        <button class="button_base" type="submit" data-bind="enable:canSchedule">@Strings.Schedule</button>
                    </fieldset>
                            }
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    "use strict";

    var resources = {
        redirectToDeviceIndexUrl: '@Url.Action("Index", "Device")',
        redirectToJobIndexUrl: '@Url.Action("Index", "Job")',
        originalJobId: '@Html.JavaScriptString(Model.OriginalJobId)',
        TotalDeviceString: "@Html.JavaScriptString(Strings.FilteredDeviceCount)",
        LoadingText: "@Html.JavaScriptString(Strings.LoadingText)",
        twinDataType: {
            'string': '@TwinDataType.String',
            'number': '@TwinDataType.Number',
            'boolean': '@TwinDataType.Boolean'
        },
        twinDataTypeOptions: [
            { value: '@TwinDataType.String', text: '@Html.JavaScriptString(Strings.StringLabel)' },
            { value: '@TwinDataType.Number', text: '@Html.JavaScriptString(Strings.NumberLabel)' },
            { value: '@TwinDataType.Boolean', text: '@Html.JavaScriptString(Strings.BooleanLabel)' }
        ]
    }
</script>
<script type="text/javascript" src="~/Scripts/Views/Job/ScheduleTwinUpdate.js?ver=@Constants.JSVersion"></script>
<script type="text/javascript">
    $(document).ready(function () {
        jQuery.validator.addMethod("maxbytelength", function (value, element, params) {
            return this.optional(element) || byteCount(value) <= params
        }, "");
        jQuery.validator.addMethod("maxtwindepth", function (value, element, params) {
            return this.optional(element) || value.match(/\./gi).length <= params
        }, "");
        IoTApp.ScheduleTwinUpdate.init(@Html.Raw(JsonConvert.SerializeObject(Model)));
    });

</script>

